﻿@{
    Layout = null;
}

<style type="text/css">
    .level_select_wrapper {
        display: inline-block;
    }

        .level_select_wrapper select {
            width: 120px;
            display: inline-block;
        }
</style>

<div class="level_select_wrapper">
    <select id="hidden_select" data-level="-1" data-target="province_id" style="display:none;">
        <option value="0" selected="selected"></option>
    </select>
    <select class="form-control" name="province_id" data-value='@(ViewData["level1"])' data-level='1' data-target="city_id" data-default="省"></select>
    <select class="form-control" name="city_id" data-value='@(ViewData["level2"])' data-level='2' data-target="area_id" data-default="市"></select>
    <select class="form-control" name="area_id" data-value="@(ViewData["level3"])" data-level="3" data-default="区"></select>
</div>

<script type="text/javascript">
    $(function () {
        function selectchange(select) {
            var parent = select.val();
            var target = $("select[name='" + select.attr('data-target') + "']");
            var level = target.attr('data-level');
            var html = "<option value=''>" + target.attr('data-default') + "</option>";
            if (parent == '' || parent == null) {
                target.html(html);
                target.trigger('change');
            }
            else {
                postJson('/Common/GetAreas/', { level: level, parent: parent }, function (data) {
                    if (!data.success) {
                        target.html(html).trigger('change');
                        return;
                    }
                    for (var i = 0; i < data.data.length; ++i) {
                        html += "<option value='" + data.data[i].AreaID + "'>" + data.data[i].AreaName + "</option>";
                    }
                    target.html(html);
                    var value = target.attr('data-value');
                    target.val(value);
                    target.trigger('change');
                })
            }
        }

        var hidden_select = $('#hidden_select');
        var province_select = $("select[name='province_id']");
        var city_select = $("select[name='city_id']");
        var area_select = $("select[name='area_id']");
        //加载省
        hidden_select.change(function () {
            selectchange($(this));
        });
        //加载市
        province_select.change(function () {
            selectchange($(this));
        });
        //加载地区
        city_select.change(function () {
            selectchange($(this));
        });

        //触发加载
        setTimeout(function () {
            hidden_select.trigger('change');
        }, 1000);
    });
</script>
